<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>
</head>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: rgb(221, 173, 85);
        text-align: center;
        border: 1px solid blanchedalmond;
    }
    .flex1{
        height: 300px;
        display: flex;
        justify-content: center;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex2{
        height: 300px;
        display: flex;
        justify-content:flex-start;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex3{
        height: 300px;
        display: flex;
        justify-content:flex-end;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex4{
        height: 300px;
        display: flex;
        justify-content:space-between;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex5{
        height: 300px;
        display: flex;
        justify-content:space-around;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex6{
        height: 300px;
        display: flex;
        justify-content:space-evenly;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex7{
        height: 300px;
        display: flex;
        align-items: flex-start;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex8{
        height: 300px;
        display: flex;
        align-items: center;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex9{
        height: 300px;
        display: flex;
        align-items: flex-end;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex10{
        height: 300px;
        display: flex;
        align-items:center;
        justify-content: center;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex11{
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
        flex-direction: row;
    }
    .flex12{
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
        flex-direction: row-reverse;
    }
    .flex13{
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
        flex-direction: column;
    }
    .flex14{
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
        flex-direction: column-reverse;
    }
    .flex15{
        width: 300px;
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
        flex-wrap: nowrap;
    }
    .flex15.box{
        width: 120px;
    }
    .flex16{
        width: 300px;
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
        flex-wrap: wrap;
    }
    .flex16.box{
        width: 120px;
    }
    .flex17{
        width: 300px;
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
        flex-wrap: wrap-reverse;
    }
    .flex17.box{
        width: 120px;
    }
    .flex18{
        width: 300px;
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex18 .box:nth-child(1){
        order: 1;
    }
    .flex18 .box:nth-child(2){
        order: 0;
    }
    .flex18 .box:nth-child(3){
        order: 2;
    }
    .flex19{
        width: 300px;
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex19 .box:nth-child(2){
        align-self: center;
    }
    .flex20{
        width: 300px;
        height: 300px;
        display: flex;
        background-color: blanchedalmond;
        border: 2px dashed black;
    }
    .flex20 .box:nth-child(2){
        align-self: flex-end;
    }
</style>
<body>
    <div class="flex1">
        <div class="box">a</div>
        <div class="box">justify-content: center</div>
        <div class="box">c</div>
    </div>
    <div class="flex2">
        <div class="box">justify-content:flex-start</div>
        <div class="box">b</div>
        <div class="box">c</div>
    </div>
    <div class="flex3">
        <div class="box">a</div>
        <div class="box">b</div>
        <div class="box">justify-content:flex-end</div>
    </div>
    <div class="flex4">
        <div class="box">a</div>
        <div class="box">justify-content:space-between</div>
        <div class="box">c</div>
    </div>
    <div class="flex5">
        <div class="box">a</div>
        <div class="box">justify-content:space-around</div>
        <div class="box">c</div>
    </div>
    <div class="flex6">
        <div class="box">a</div>
        <div class="box">justify-content:space-evenly</div>
        <div class="box">c</div>
    </div>
    <div class="flex7">
        <div class="box">align-items: flex-start</div>
        <div class="box">b</div>
        <div class="box">c</div>
    </div>
    <div class="flex8">
        <div class="box">a</div>
        <div class="box">align-items: center</div>
        <div class="box">c</div>
    </div>
    <div class="flex9">
        <div class="box">a</div>
        <div class="box">b</div>
        <div class="box">align-items: flex-end</div>
    </div>
    <div class="flex10">
        <div class="box">align-items: center</div>
        <div class="box">b</div>
        <div class="box">justify-content: center</div>
    </div>
    <div class="flex11">
        <div class="box">flex-direction: row</div>
        <div class="box">b</div>
        <div class="box">c</div>
    </div>
    <div class="flex12">
        <div class="box">flex-direction: row-reverse</div>
        <div class="box">b</div>
        <div class="box">c</div>
    </div>
    <div class="flex13">
        <div class="box">flex-direction: column</div>
        <div class="box">b</div>
        <div class="box">c</div>
    </div>
    <div class="flex14">
        <div class="box">a</div>
        <div class="box">b</div>
        <div class="box">flex-direction: column-reverse</div>
    </div>
    <center>
    <div class="flex15">
        <div class="box">a</div>
        <div class="box">flex-wrap: nowrap</div>
        <div class="box">c</div>
    </div>
    <div class="flex16">
        <div class="box">a</div>
        <div class="box">b</div>
        <div class="box">flex-wrap: wrap</div>
    </div>
    <div class="flex17">
        <div class="box">a</div>
        <div class="box">b</div>
        <div class="box">flex-wrap: nowrap-reverse</div>
    </div>
    <div class="flex18">
        <div class="box">a-order:1</div>
        <div class="box">b-order:0</div>
        <div class="box">c-order:2</div>
    </div>
    <div class="flex19">
        <div class="box">a</div>
        <div class="box">nth-child(2):align-self: center</div>
        <div class="box">c</div>
    </div>
    <div class="flex20">
        <div class="box">a</div>
        <div class="box">nth-child(2):align-self: flex-end</div>
        <div class="box">c</div>
    </div>
    </center>
</body>
</html>